<template>
    <div class="province-body">

        <FullHeadImg backImage="marketplace/detail/p1_head_bg.png">
        </FullHeadImg>

        <section class="switcher body-m">

            <ul class="switcher-switch">
                <li v-for="(item, idx) in switchItems" :key="idx" :class="{ 'switch_active': state.switchIdx === idx }"
                    @click="switchTab(idx)"> {{ item }}
                </li>
            </ul>

            <div class="overview-content switch-content" v-if="state.switchIdx == 0">
                <p>Unity Prosper Province (“UP”) is under the contract to acquire the Province Luxury Senior Living and
                    Prime Commercial/Retail (“Province” or “Property”) located on 400-420 W. Valley Blvd. San Gabriel,
                    CA 91176.</p>
                <p>Province consists of 133 units of Senior Living, 50,138 SF Commercial/Retail, 3,033 Outdoor Patio and
                    467 parking spaces, in 5 stories and 2 subterrains underground parking class A building. The
                    Property shall complete and ready to move in by January 2023. UP intends to start the pre-leasing
                    program during the summer of 2022 and close the transaction before the end of 2022.</p>
                <p>San Gabriel Valley is one of the most Asian affluent locations in Los Angeles. Often dubbed the
                    “Asian Beverly Hills”, the area has experienced tremendous influx of foreign money and buyers in the
                    last decade. San Gabriel Valley population of Asians is a cohesive dynamic mix – top school
                    districts, Michelin Chinese restaurants, strong-rooted aging retirees parents all residing in the
                    community that is well-represented on the city council and congressional level.</p>
                <p>The property benefits from the synergies in a vibrant and lively trafficked San Gabriel retail mecca
                    including the San Gabriel Square (anchored by 99 Ranch Market), Hilton Plaza shopping center; three
                    hotels (Hilton, Curio, and Sheraton), and major supermarkets (99 Ranch, 168 Market, Hawaii, Shun
                    Fat, and Valley Supermarket, Ralph, Claro’s Italian Market, Mitsuwa Marketplace), endless nice
                    gourmet Chinese restaurants, variety of retails, Banks, and business offices. Several most exciting
                    new developments are Curio Collection by Hilton (212 rooms) and The One (81 condominiums and
                    retail), all within walking distance. Superb traffic count (±29,400 average cars per day on Valley
                    Blvd), as well as a high-density area (population of ±143,666 people within a 2-mile radius).</p>
            </div>

            <div class="proformace-content switch-content" v-else-if="state.switchIdx === 1">
                <p>The purchase price is One Hundred Twenty-Five Million USD ($125,000,000) Closing costs, interest
                    reserve, upgrade/FF&amp;E costs, tenant improvement, and working capital reserve Twenty Million USD
                    ($20,000,000) The total project capitalization is One Hundred Forty-Five Million USD ($145,000,000)
                </p>
                <p>Senior Debt is One Hundred and Ten Million USD ($110,000,000), LTV 75% Equity Capital Thirty-Five
                    Million USD ($35,000,000)</p>
            </div>

            <div class="reason-content switch-content" v-else-if="state.switchIdx === 2">
                <p>With advances in healthcare, people are living longer. As they live longer, many are seeking housing
                    that offers not only comfort and security but also social engagement and a fulfilling lifestyle.
                    Luxury housing meets these needs by providing a range of activities, healthcare support, and
                    comfort. However, the supply of luxurious senior housing remains limited. Developing these types of
                    communities requires significant investment and time. Zoning regulations, construction costs, and
                    the availability of suitable land can be challenges in building new luxury facilities. Furthermore,
                    the number of developers focused on high-end senior housing remains relatively small compared to the
                    overall market for senior living.</p>
                <p>For Province, Unity Prosper Management is pushing the boundaries of the senior living sector by
                    offering a powerful dimension to the UP Living experience; a comprehensive range of exclusive à la
                    carte services and experiences, based on best-in-class research, curated exclusively for our
                    residents’ wellness and life’s unique moments:</p>

                <p class="p1"><strong>Dedicated to Wellness<br></strong>VIP Concierge Healthcare Services<br>Yoga &amp;
                    Healing sessions<br>On-site Preventive Care Clinic partnership</p>
                <p><strong>Savor the Moments<br></strong>Art &amp; Culinary Classes<br>Adult continuing education
                    classes at Cal Tech<br>Game Nights &amp; Cultural Celebrations<br>Field trips to concerts and art
                    museums<br>Nature outings and gardening</p>
                <p class="p1"><strong>Experience of Living<br></strong>Connected Lifestyle App<br>VR Engagement with
                    Friends &amp; Familes<br>Asset Management Advisory Service<br>Exclusive Access Privileges UP
                    portfolio properties</p>
            </div>

            <div class="property-content switch-content" v-else>
                <p class="p1">Delivered to the highest design and construction standards, the Residential component will
                    offer uniquely curated shopping, gym, and restaurant concepts in a vibrant open-air layout that
                    blends seamlessly into the surrounding neighborhood</p>
                <table>
                    <tbody>
                        <tr>
                            <td><strong>Unit Type</strong></td>
                            <td><strong>Number of Units</strong></td>
                            <td><strong>Average Size (square feet)</strong></td>
                        </tr>
                        <tr>
                            <td>Studio</td>
                            <td>10</td>
                            <td>672</td>
                        </tr>
                        <tr>
                            <td>One bedroom</td>
                            <td>103</td>
                            <td>945</td>
                        </tr>
                        <tr>
                            <td>Two bedroom</td>
                            <td>16</td>
                            <td>1,423</td>
                        </tr>
                        <tr>
                            <td>Three bedroom</td>
                            <td>4</td>
                            <td>1920</td>
                        </tr>
                        <tr>
                            <td>Total</td>
                            <td>133</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
                <p>Net Rentable Area: 50,138 SF + 3,033 SF outdoor 2nd level patio<br>2- Level Garage with 467 parking
                    spaces.<br>Parking for both residents and commercial Customers</p>
                <p><strong>Main Amenities Highlights:</strong></p>
                <ul>
                    <li>The Club—Indulge in homemade, local, gourmet cuisine prepared by our Executive Chef from our
                        Exhibition Kitchen.</li>
                    <li>The Lounge—Contemporary lounge with outdoor seating and panoramic views. Drop by for casual fare
                        in a beautiful setting.</li>
                    <li>The Bar—Indoor/outdoor bar with fireplace for good company &amp; good conversation.</li>
                    <li>The Community Room—Invite family and friends for a private dining experience.</li>
                    <li>The Theatre—Treat yourself to great entertainment.</li>
                    <li>The Studio—Showcase your inner talents or discover new skills.</li>
                    <li>Gym —Exercise in our fitness center and then decompress and rejuvenate your spirit.</li>
                    <li>Trash Removal and Bed Making—Allow our Housekeeping Staff to maintain your apartment to your
                        standards.</li>
                    <li>Transportation—Enjoy local shopping, entertainment and cultural attractions with our
                        transportation services.</li>
                    <li>Housekeeping and Laundry—Our trained staff is available to you so that you don’t need to worry
                        about cleaning your apartment or laundering your clothes or linens.</li>
                    <li>Concierge Services—Trust our informed and attentive Concierge for assistance scheduling
                        appointments or booking specialized services.</li>
                </ul>
            </div>
        </section>

        <section class="input-form body-m">
            <h3>Register your interest</h3>
            <el-form :model="state" size="large" :rules="rules" status-icon ref="ruleFormRef">

                <el-form-item prop="fullName" label="Full Name" label-position="top" required>
                    <el-input v-model="state.fullName" placeholder="Full Name" />
                </el-form-item>

                <el-form-item prop="email" label="Email Address" label-position="top">
                    <el-input v-model="state.email" placeholder="Email Address" />
                </el-form-item>

                <el-form-item prop="potential" label="Potential Investment Amount" label-position="top">
                    <el-input v-model="state.potential" placeholder="USD" />
                </el-form-item>

                <el-form-item>
                    <el-button class="confirm-button" colo style="width: 100%;" type="primary"
                        @click="submitForm(ruleFormRef)">Submit</el-button>
                </el-form-item>
            </el-form>
        </section>

        <section></section>
    </div>
</template>

<script setup lang="ts" name="province">
import { reactive, ref } from 'vue';
import type { FormRules, FormInstance } from 'element-plus'
import appConfig from '@/utils/appConfig';

const ruleFormRef = ref<FormInstance>()
const state = reactive({
    switchIdx: 0,

    fullName: '',
    email: '',
    potential: '',
})

const rules = reactive<FormRules>({
    fullName: [
        { required: true, message: 'Please input your full name', trigger: 'blur' },
        { min: 2, max: 50, message: 'Length should be 2 to 50', trigger: 'blur' },
    ],
    email: [
        {
            required: true,
            message: 'Please input email address',
            trigger: 'blur',
        },
        {
            type: 'email',
            message: 'Please input correct email address',
            trigger: ['blur', 'change'],
        },
    ],
    potential: [
        { required: true, message: 'Please input Potential Investment Amount', trigger: 'blur' },
    ],
})

const switchItems = [
    'Overview',
    'Proformace',
    'Reason to invest',
    'Property details'
]

function switchTab(idx: number) {
    state.switchIdx = idx
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            sendMail(formEl)
        } else {
            console.log('error submit!', fields)
        }
    })
}


function sendMail(formEl: FormInstance | undefined) {
    const email = appConfig.emailTo
    const subject = 'Register your interest';

    const mailBody = `Name:${state.fullName}\nPotential Investment Amount${state.potential}`
    const mailToLink = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(mailBody)}`
    // 打开邮件客户端
    window.location.href = mailToLink
    resetForm(formEl)

    ElMessage({
        type: 'success',
        message: 'Send Success',
        grouping: true
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style scoped lang="scss">
.province-body {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.switcher {
    width: 100%;


    display: flex;
    flex-direction: column;
    gap: 2rem;

    .switcher-switch {
        display: flex;
        gap: 2rem;
        border-bottom: 1px solid $primary-color;

        li {
            font-weight: bold;
            font-size: 1.1rem;
            padding-bottom: 1rem;
        }

        li:hover {
            cursor: pointer;
        }

        .switch_active {

            border-bottom: 5px solid $primary-color;
        }
    }

    .switch-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-size: 0.9rem;
    }

    .property-content {
        ul {
            list-style-type: disc;
            list-style-position: inside;
            padding-left: 1rem;
        }

        table {
            // 边框合并
            border-collapse: collapse;
            border: 1px solid rgb(200, 200, 200);
            letter-spacing: 1px;
            font-size: 0.8rem;
        }

        td,
        th {
            border: 1px solid rgb(190, 190, 190);
            padding: 10px 20px;
        }

        td {
            text-align: center;
        }

        tr:nth-child(odd) {
            background-color: #f2f2f2;
            /* 浅灰色 */
        }

        tr:hover {
            background-color: #ddd;
            transition: background 0.3s;
        }
    }
}

.input-form {
    width: 100%;
    background-color: #fffed9;
    border-radius: 2rem;
    padding: 2rem;

    .el-input {
        --el-input-bg-color: #faef9e !important;
    }
}

.confirm-button {
    color: black;
    font-size: 1.1rem;
    height: 50px;
}

@media (max-width: 650px) {
    .province-body {
        gap: 2rem;
    }

    .switcher .switcher-switch {
        width: 100%;
        gap: 10px;
        justify-content: space-evenly;
    }
}
</style>